<template>
    <div id="body">
        <div id="center">
            <el-form :model="RegisterForm" status-icon :rules="rules" ref="RegisterForm" label-width="100px" class="demo-ruleForm">
                <el-form-item  prop="businessName" >
                    <label slot="label">企业名称:</label>
                    <el-input style="height: 5px;width: 330px;left: 100px" placeholder="请输入企业名称" v-model="RegisterForm.businessName"></el-input>
                </el-form-item>
                <el-form-item prop="organizationType">
                    <label  class="orgName" slot="label" style="left: 70px">机构类型:</label>
                    <el-select placeholder="请选择机构类型" class="orgTyp" v-model="RegisterForm.organizationType" clearable>
                        <el-option label="上海" value="shanghai"></el-option>
                        <el-option label="北京" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item  prop="unifiedSocialCredit" >
                    <label slot="label" style="left: 70px" class="tongyi" >统一社会信用代码:</label>
                    <el-input style="height: 5px;width: 330px;left: 100px" placeholder="请输入统一社会信用代码" v-model="RegisterForm.unifiedSocialCredit"></el-input>
                </el-form-item>
                <el-form-item  prop="username" >
                    <label slot="label"  class="user">用户名:</label>
                    <el-input style="height: 5px;width: 330px;left: 100px" placeholder="请输入用户名" v-model="RegisterForm.username"></el-input>
                </el-form-item>
                <el-form-item  prop="password" >
                    <label slot="label" class="pass">密&nbsp;&nbsp;&nbsp;码:</label>
                    <el-input style="height: 5px;width: 330px;left: 100px" placeholder="请输入密码" v-model="RegisterForm.password"></el-input>
                </el-form-item>
                <el-form-item  prop="checkPassword" >
                    <label slot="label" class="pass">确认密码:</label>
                    <el-input style="height: 5px;width: 330px;left: 100px" placeholder="请确认密码" v-model="RegisterForm.checkPassword"></el-input>
                </el-form-item>
                <el-form-item  prop="phone" >
                    <label slot="label" class="pass">电话号:</label>
                    <el-input style="height: 5px;width: 330px;left: 100px" placeholder="请输入电话号" v-model="RegisterForm.phone"></el-input>
                </el-form-item>
                <el-form-item  prop="identifyingCode" >
                    <label slot="label" class="pass">验证码:</label>
                    <el-input style="height: 5px;width: 160px;left: 100px" placeholder="请输入验证码" v-model="RegisterForm.identifyingCode"></el-input>
                    <img class="img1" width="160px" onclick="this.src='http://localhost:9000/kaptcha?d='+new Date()*1" src="http://localhost:9000/kaptcha">
                </el-form-item>
                <el-button type="primary" class="register">注册</el-button>
                <el-button type="primary" class="login">登录</el-button>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Register",
        methods: {
            open() {
                this.$message('这是一条消息提示');
            },
        },
        data(){
            return{
                RegisterForm:{
                    businessName:"",
                    unifiedSocialCredit:"",
                    username:"",
                    password:"",
                    checkPassword:"",
                    phone:"",
                    identifyingCode:"",
                    organizationType:"",
                },
                rules:{
                    businessName:[
                        {required: true, message: '企业名称不能为空', trigger: 'blur'}  
                    ],
                    organizationType:[
                        {required: true, message: '机构类型不能为空', trigger: 'blur'}
                    ],
                    unifiedSocialCredit:[
                        {required: true, message: '统一社会信用代码不能为空', trigger: 'blur'}
                    ],
                    username:[
                        {required: true, message: '用户名不能为空', trigger: 'blur'}
                    ],
                    password:[
                        {required: true, message: '密码不能为空', trigger: 'blur'}
                    ],
                    checkPassword:[
                        {required: true, message: '确认密码不能为空', trigger: 'blur'}
                    ],
                    phone:[
                        {required: true, message: '手机号不能为空', trigger: 'blur'}
                    ],
                    identifyingCode:[
                        {required: true, message: '验证不能为空', trigger: 'blur'}
                    ],
                }
            }
        }
    }
</script>

<style xml:lang="scss" scoped>
    .orgName{
        width:350px;
        height: 250px;
        color: #9C7049;
        position: absolute;
    }
    .orgTyp{
        width:330px;
        height: 50px;
        left: 100px;
        color: white;
        display: block;
    }
    .tongyi{
        width:350px;
        height: 250px;
        color: #9C7049;
        position: absolute;
    }
    .user{
        width:350px;
        height: 250px;
        color: #9C7049;
        position: absolute;
    }
    .pass{
        width:350px;
        height: 250px;
        color: #9C7049;
        position: absolute;
    }
#body{
    background: url("../../assets/images/bg.jpg");
    background-repeat:no-repeat;
    height:960px;
    width:1920px;
    background-size: 100% auto;
    margin: 0px;
    padding: 0px;
    /*padding: 40px 50px;*/
    /*position: absolute;*/
}
    #center{
        margin-top: 8%;
        width: 50%;
        height:750px;
        left: 500px;
        top: 20px;
        background-image: url('../../assets/images/bg-border.png');
        background-size: 80% 80%;
        background-repeat: no-repeat;
        padding: 40px 50px;
        position: absolute;
    }
    label{
        color: #9C7049;
        font-size: 16px;
        font-weight: bold;
        line-height: 38px;
        text-align: left;
        width: 150px;
        left: 70px;
    }
   el-input{
       background-color: #9c7049;
       color: white;
       width: 100%;
       height: 100%;
       margin: 15px auto;
       display: block;
   }
    .login{
        position: absolute;
        top: 600px;
        left: 170px;
        background-color: #9c7049;
        color: white;
        width: 350px;
        height: 40px;
        margin: 15px auto;
        display: block;
    }
    .register{
        top: 550px;
        left: 180px;
        position: absolute;
        background-color: #9c7049;
        color: white;
        width: 350px;
        height: 40px;
        margin: 15px auto;
        display: block;
    }
    .img1{
        position: absolute;
        top: 0px;
        left: 270px;
        
    }
</style>